<template>
  <!-- 找回密码 -->
  <div class="foundPassword">
    <img class="back" src="@/assets/img/icons/black/back.svg" @click="$router.back()" />
    <van-number-keyboard :show="show" @blur="show = false" @input="onInput" @delete="phone = phone.slice(0, phone.length - 1)" />
    <div class="title">
      <span>找回密码</span>
    </div>
    <div class="tip">为了保证您的账户安全，1天只能操作1次，否则账户将会被锁定无法登录</div>
    <div class="input-box">
      <div class="left">
        <div>
          <span>+</span>
          <span style="margin-left: 0.02rem">86</span>
        </div>
        <img class="xiala" src="@/assets/img/icons/black/xiala.svg" />
      </div>
      <div class="line"></div>
      <div class="right">
        <input @click="inputClick" class="input" v-model="phone" type="tel" placeholder="请输入手机号码" />
        <img v-show="phone" class="clear" src="@/assets/img/icons/clear.svg" @click="phone = ''" />
      </div>
    </div>
    <k-button
      class="next"
      :disable="!/^1[3|4|5|7|8][0-9]{9}$/.test(phone)"
      :bgColor="/^1[3|4|5|7|8][0-9]{9}$/.test(phone) ? 'primary' : '#DFDFDF'"
      fontColor="#FFFFFF"
      fontSize="0.16rem"
      radius="0.03rem"
      @click="btnClick"
      >下一步
    </k-button>
  </div>
</template>

<script>
export default {
  name: 'foundPassword2',
  data() {
    return {
      phone: '', //用户输入手机号码
      show: false, //显示数字键盘
    }
  },
  methods: {
    //输入
    onInput(value) {
      if (this.phone.length < 11) this.phone += value
    },
    //输入框被点击事件
    inputClick() {
      document.activeElement.blur()
      if (!this.show) this.show = true
    },
    //获取验证码
    btnClick() {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true, //禁止背景点击
        duration: 0,
      })
      //前往获取验证码
      this.$network
        .main('getCode', this.phone)
        .then((data) => {
          this.$toast.clear() //清除toast
          this.$router.push({
            path: '/inputCode2',
            query: { phone: this.phone },
          })
          //提示成功
          this.$toast({
            type: 'success',
            message: '发送成功！',
          })
        })
        .catch((err) => {
          this.$toast.clear() //清除toast
          //提示失败
          this.$toast({
            type: 'fail',
            position: 'bottom',
            message: err,
          })
        })
    },
  },
}
</script>

<style scoped src="./index.css"></style>
